import { defineStore } from "pinia";
import layout from "../schema/layout.json";

export const useLayoutStore = defineStore("layout", {
  state: () => {
    return layout;
  },
  getters: {
    getComponents(): any[] {
      return this.components;
    },
    getStyle(): any {
      return this.style;
    },
    getName(): String {
      return this.name;
    },
  },
  actions: {
    updateStyle(style: any) {
      this.style = { ...style };
    },
    addComponent(component: any) {
      this.components.push(component);
    },
    updateComponent(component: any) {
      let com: any = this.components.find(
        (item) => item.uuid === component.uuid
      );
      com = {...component};
    },
    updateComponents(components: any) {
      this.components = components.map((item: any) => {
        return { ...item };
      });
    },
    update(layout: any) {
      this.style = { ...layout.style };
      this.name = layout.name;
      this.updateComponents(layout.components);
    },
  },
});
